<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>客户总览</title>

		<link rel="stylesheet" href="/pear/component/layui/css/layui.css">
		<script src="/pear/component/layui/layui.js"></script>
		<script src="/js/jquery-3.2.1.min.js"></script>

    <style>
        html{
            background-color: #f2f2f2;
        }
        div{
            display: block;
        }
        .test{
        	padding: 15px;
        }
        .allCustomer{
            background: #fff;
            padding: 30px;
        }
        .search{
        	position: relative;
        	padding-bottom: 40px;
        }
        .search_icon{
        	position: absolute;
        	top: 9px;
        	left: 6px;
        }
        .shurukuang{
        	padding: 0 32px;
        }
	    .caller-contar {
   			padding-bottom: 20px;
		}
		.caller-contar .caller-item {
    		    padding: 25px 0;
    		border-bottom: 1px solid #e0e0e0;
		}
		.caller-item{
			display: flex;
		}
		img{
			width: 40px;
			height: 40px;
			border-radius: 100%;
		}
		p{
			    line-height: 100%;
    padding: 8px 0;
		}
		p:first-child{
			padding-top: 0;
		}
		.caller-iconset{
			padding-top: 8px;
			
		}
		.caller-iconset .layui-icon{
			margin-right: 8px;
		}
		.caller-detail{
			margin-left: 20px;
		}
		.chaxun{
			margin-top: 20px;
		}
		.manager{
			margin-left: 800px;
			margin-top: 10px;
		}

		.layui-icon-login-wechat {
    color: #4DAF29;
}
		.layui-icon-login-qq {
    color: #3492ED;
}
        .layui-icon-login-weibo {
    color: #CF1900;
}


    </style>
</head>
<body>
    <div class="test">
        <div class="allCustomer">
            <form action="" class="layui-form  search">
            	<i class="layui-icon layui-icon-search search_icon"></i>
     			 <input type="text" name="title" required  lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input shurukuang">
					<button type="button" class="layui-btn chaxun" id="chaxun">查询</button>
            </form>
			<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
			  <ul class="layui-tab-title">
    			<li class="layui-this">所有客户</li>
  			 </ul>
			</div>      
            <div class="caller-contar" id="father">
                <div class="caller-item">
                	<img src="/pear/admin/images/picture.jpg" />
                	<div class="caller-detail">
                		<p><strong>云沐里</strong></p>
                		<p><i class="layui-icon layui-icon-location"></i>四川眉山仁寿区域</p>
                		<div class="caller-iconset">
            			  <i class="layui-icon layui-icon-login-wechat"></i>
             			  <i class="layui-icon layui-icon-login-qq"></i>
              			  <i class="layui-icon layui-icon-login-weibo"></i>
          				</div>
                	</div>

                </div>

            </div>

        </div>
    </div>


    <script>

        layui.use(['form','element','layer'], function(){
            var form = layui.form;
            var element = layui.element;
			var layer = layui.layer;
        });
    </script>
<script>
	// 文档加载事件
	$(function () {

		$.ajax({
			url:"/workspace/customerList",
			success:function (data) {
				console.log(data);
				var html = '';
				for (let i = 0; i < data.length; i++) {
					html +=
							'<div class="caller-item">'+
							'<img src="/pear/admin/images/picture.jpg" />'+
							'<div class="caller-detail">'+
							'<p><strong>'+data[i].userName+'</strong></p>'+
							'<p><i class="layui-icon layui-icon-location"></i>'+data[i].address+'</p>'+
							'<div class="caller-iconset">'+
							'<i class="layui-icon layui-icon-login-wechat"></i>'+
							'<i class="layui-icon layui-icon-login-qq"></i>'+
							'<i class="layui-icon layui-icon-login-weibo"></i>'+
							'</div>'+
							'</div>'+
							'<div class="manager">'+
							'<button type="button" class="layui-btn layui-btn-primary"><i class="layui-icon" style="color: darkgreen">&#xe612;</i> Manager:<strong>'+data[i].manager+'</strong></button>'+
							'</div>'+
							'</div>';
				}
				$("#father").html(html);
			}
		})
	})


	// 查询用户输入
	$('#chaxun').click(function () {
		var userName = $('.shurukuang').val();
		$.ajax({
			url:"/workspace/search",
			data:{"userName":userName},
			success:function (data) {

				if (data==''){
					layer.open({
						type:0,
						title:"系统消息",
						icon:2,
						content:"用户名不存在！"
					});
				}else {
					console.log(data);
					layer.open({
						type: 1,
						title: userName+'-个人信息',
						area: ['400px', '220px'],
						content:
								'<div class="caller-item" style="padding-top: 50px;padding-left: 70px">'+
								'<img src="/pear/admin/images/picture.jpg" />'+
								'<div class="caller-detail">'+
								'<p><strong>'+data[0].userName+'</strong></p>'+
								'<p><i class="layui-icon layui-icon-location"></i>'+data[0].address+'</p>'+
								'<div><i class="layui-icon" style="color: darkgreen">&#xe612;</i>Manager:<strong>'+data[0].manager+'</strong></div>'+
								'<div class="caller-iconset">'+
								'<i class="layui-icon layui-icon-login-wechat"></i>'+
								'<i class="layui-icon layui-icon-login-qq"></i>'+
								'<i class="layui-icon layui-icon-login-weibo"></i>'+
								'</div>'+
								'</div>'+
								'</div>'

					})
				}
			}
		})
	})
</script>
</body>
</html>